Support initial aria-describedby on all form fields #1347

colinrotherham · 2019-05-15T06:55:19Z

We've noticed the describedBy param used internally can't be configured.

This pull request supports an initial aria-describedby value on all form fields, populated before the optional hint and error message IDs are appended.

For form inputs:

{{ govukInput({
  describedBy: 'parent-fieldset-error-id'
}) }}

Or for those wrapped by fieldsets:

{{ govukDateInput({
  fieldset: {
    describedBy: 'parent-fieldset-error-id'
  }
}) }}

Useful when fields are described by errors or hints on parent fieldsets such as:

When moving between these nested checkboxes, we can now use params.fieldset.describedBy to repeat the error message "Select at least one reason" to screen readers as a usability improvement.

colinrotherham · 2019-05-17T10:33:09Z

One suggestion, is perhaps we rename it describedByPrefix so it's more obvious that we're only setting the initial aria-describedby attribute value before hints and error message IDs are appended.

Similar to idPrefix and namePrefix used by checkboxes and dates.

36degrees

I think this generally makes sense, and the tests are really thorough 👏 Thanks @colinrotherham!

There are a couple of minor inconsistencies and some documentation issues that need addressing before I can approve it.

36degrees · 2019-05-17T12:32:55Z

src/components/checkboxes/template.njk

@@ -9,7 +9,10 @@

 {#- a record of other elements that we need to associate with the input using
   aria-describedby – for example hints or error messages -#}
-{% set describedBy = "" %}
+{% set describedBy = params.describedBy if params.describedBy else "" %}
+{% if params.fieldset.describedBy %}


Am I right in thinking there's no difference between passing { fieldset : { describedBy: 'foo' }} and { describedBy: 'foo' }? Wondering if we need to support both of those, or if we should just support passing it on the fieldset.

This would also be consistent with the date input and radio components.

@36degrees It's because checkboxes are special, unlike radios.

Checkboxes with single option (and hint) set 'aria-describedby' on input

http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-single-option-(and-hint)-set-'aria-describedby'-on-input/preview

So the describedBy attribute can be without a fieldset.

Gotcha, in which case I think this makes sense, thanks for talking me through it.

I can't see a test that covers this functionality (setting aria-describedby on a single checkbox without a fieldset) – could we add one?

You're right! Thanks.

I've extended the existing single checkbox tests and made two new ones.

You can see the new bit pushed here: https://github.com/alphagov/govuk-frontend/compare/8e23ce86235c93a77d54b7ccccb0edad923ef7e5..09a9700814d433925b52a9f6d25848093cacdd61

src/components/checkboxes/checkboxes.yaml

src/components/fieldset/template.test.js

src/components/input/input.yaml

src/components/select/template.test.js

src/components/textarea/textarea.yaml

src/components/select/select.yaml

src/components/checkboxes/template.test.js

colinrotherham · 2019-05-17T13:04:51Z

Thanks @36degrees, I'll fix the fieldset param description, I copied it from there:

params:
- name: describedBy
  type: string
  required: false
  description: Text or element id to add to the `aria-describedby` attribute to provide description of the group of fields for screenreader users.

I'll remove the "Text or" bit from all mine too, so it's just the element id.

36degrees · 2019-05-17T13:06:21Z

Hah, of course it came from us 🤦‍♂

colinrotherham · 2019-05-17T13:39:26Z

@36degrees Thanks for the thorough review 👍

I've left two of the conversations open regarding the single checkbox without a fieldset. You might not want to support customising describedBy here.

colinrotherham · 2019-05-21T14:11:23Z

Two new tests added to exercise the single checkbox variations:

with single option set 'aria-describedby' on input
with single option (and hint) set 'aria-describedby' on input

The new tests show how params.describedBy works here (instead of params.fieldset.describedBy) as neither variation has a wrapping fieldset.

36degrees

Thanks for this @colinrotherham.

This'll need another review from the team and then we can get this merged.

As you've probably noticed, we're working up to a 3.x release at the minute, which may take a little while. Is this functionality you need with any urgency? We can look at doing a 2.x release if it's required.

colinrotherham · 2019-05-21T14:17:41Z

@36degrees Perfect, thank you.

No immediate urgency. Would be a great one to have alongside 3.x 👍

NickColley

This is a lot of work, thanks a lot @colinrotherham

colinrotherham mentioned this pull request May 15, 2019

Make it easier to add a hint or an error message to a fieldset #1281

Closed

NickColley added the awaiting triage Needs triaging by team label May 17, 2019

36degrees reviewed May 17, 2019

View reviewed changes

colinrotherham force-pushed the inherit-describedby branch 4 times, most recently from 7f28b36 to 8e23ce8 Compare May 17, 2019 13:35

Support initial aria-describedby on all form fields

09a9700

colinrotherham force-pushed the inherit-describedby branch from 8e23ce8 to 09a9700 Compare May 21, 2019 13:36

36degrees approved these changes May 21, 2019

View reviewed changes

NickColley approved these changes May 21, 2019

View reviewed changes

NickColley merged commit 5993a38 into alphagov:master May 21, 2019

colinrotherham deleted the inherit-describedby branch May 24, 2019 08:19

NickColley added this to the v2.12.0 milestone May 28, 2019

NickColley removed the awaiting triage Needs triaging by team label May 28, 2019

This was referenced May 28, 2019

Release 2.12.0 #1383

Merged

Bump govuk-frontend to v2.12.0 alphagov/govuk-prototype-kit#760

Merged

hannalaakso mentioned this pull request Sep 26, 2019

Refactor handling of count message in character count JS #1594

Merged

36degrees mentioned this pull request Oct 2, 2019

Character count count message is not associated with textarea #1106

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support initial aria-describedby on all form fields #1347

Support initial aria-describedby on all form fields #1347

colinrotherham commented May 15, 2019 •

edited

Loading

colinrotherham commented May 17, 2019

36degrees left a comment

36degrees May 17, 2019

36degrees May 17, 2019

colinrotherham May 17, 2019 •

edited

Loading

36degrees May 21, 2019

colinrotherham May 21, 2019

colinrotherham commented May 17, 2019

36degrees commented May 17, 2019

colinrotherham commented May 17, 2019

colinrotherham commented May 21, 2019

36degrees left a comment

colinrotherham commented May 21, 2019

NickColley left a comment

Support initial aria-describedby on all form fields #1347

Support initial aria-describedby on all form fields #1347

Conversation

colinrotherham commented May 15, 2019 • edited Loading

colinrotherham commented May 17, 2019

36degrees left a comment

Choose a reason for hiding this comment

36degrees May 17, 2019

Choose a reason for hiding this comment

36degrees May 17, 2019

Choose a reason for hiding this comment

colinrotherham May 17, 2019 • edited Loading

Choose a reason for hiding this comment

36degrees May 21, 2019

Choose a reason for hiding this comment

colinrotherham May 21, 2019

Choose a reason for hiding this comment

colinrotherham commented May 17, 2019

36degrees commented May 17, 2019

colinrotherham commented May 17, 2019

colinrotherham commented May 21, 2019

36degrees left a comment

Choose a reason for hiding this comment

colinrotherham commented May 21, 2019

NickColley left a comment

Choose a reason for hiding this comment

colinrotherham commented May 15, 2019 •

edited

Loading

colinrotherham May 17, 2019 •

edited

Loading